<template>
  <div class="wrapper">
    <section class="item span1">
      <article class="item-span item-span1">
        <dv-border-box-13>
          <div class="flex-center-align">
            <h1 class="title">// 当前比对数据 // </h1>
            <span class="num">3,456,789</span>
          </div>
        </dv-border-box-13>
      </article>
      <article class="item-span item-span2">
        <dv-border-box-11 title="违法犯罪人员分析">
          <tao-charts :data="option.pieChart" />
        </dv-border-box-11>
      </article>
      <article class="item-span item-span3">
        <dv-border-box-11 title="人口出入记录">
          <tao-charts :data="option.lineChart" />
        </dv-border-box-11>
      </article>
    </section>

    <section class="item span2">
      <div class="header flex-center">
        <img src="~@/assets/images/jinghui.png"
             style="width:0.8rem;height:0.8rem">
        <span>智慧社区内网比对平台</span>
      </div>
      <div class="flex-center">
        <p class="title">NO.1北京：2543289人</p>
        <p class="title">NO.1天津： 5690人</p>
        <p class="title">NO.1河北： 456人</p>
      </div>
      <p>犯罪人口来源分析</p>
      <dv-decoration-12 class="animate-rate" />
      <tao-charts :data="option.mapChart" />
    </section>
    <section class="item span3">
      <article class="item-span item-span1">
        <dv-border-box-11 title="违法犯罪人员年龄分布">
          <tao-charts :data="option.hillChart" />
        </dv-border-box-11>
      </article>
      <article class="item-span item-span2">
        <dv-border-box-11 title="违法犯罪人员地区分布">
          <tao-charts :data="option.barChart" />
        </dv-border-box-11>
      </article>
      <article class="item-span item-span3">
        <dv-border-box-11 title="人口出入时间段统计">
          <tao-charts :data="option.hillChart" />
        </dv-border-box-11>
      </article>
    </section>
  </div>
</template>

<script>
// import axios from "axios"
import { reactive, onMounted, getCurrentInstance } from "vue"
import chartConfig from "./echarts"
import cityJson from "./city.json"

export default {
  setup() {
    const { ctx } = getCurrentInstance()
    console.log(ctx, "获得的属性")
    // 指定图表的配置项和数据
    const dataset = [
      ["product", "值"],
      ["衬衫", 43.3],
      ["羊毛衫", 83.1],
      ["雪纺衫", 86.4],
      ["裤子", 72.4],
      ["高跟鞋", 72.4],
      ["袜子", 72.4]
    ]
    const dataset2 = [
      ["违法犯罪人员分析", "数值"],
      ["卖淫嫖娼", 335],
      ["经侦嫌疑", 310],
      ["重点人口", 234],
      ["刑贞重点", 135],
      ["吸毒人口", 148]
    ]
    const dataset3 = [
      ["人口出入时间段统计", "数值"],
      ["驯鹿", 123],
      ["火箭", 60],
      ["飞机", 234],
      ["高铁", 45],
      ["轮船", 148],
      ["汽车", 148],
      ["跑步", 148],
      ["步行", 148]
    ]
    const dataset4 = [
      ["地区分布", "数值"],
      ["河北", 123],
      ["天津", 60],
      ["北京", 234],
      ["新疆", 45],
      ["内蒙", 148],
      ["宁夏", 148],
      ["海南", 148]
    ]
    const option = reactive(
      {
        lineChart: chartConfig.lineChart(dataset),
        pieChart: chartConfig.pieChart(dataset2),
        hillChart: chartConfig.hillChart(dataset3),
        barChart: chartConfig.barChart(dataset4),
        pieChartVie: chartConfig.pieChartVie(),
        mapChart: { ...chartConfig.mapChart(cityJson) }
      }
    )
    onMounted(() => {
      // axios.get("https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json").then((res) => {
      //   console.log(res, "ress")
      //   option.mapChart = chartConfig.mapChart(ctx.echarts, res.data)
      // })
    })
    return { option }
  }
}
</script>
<style lang="scss" scoped>
$num-text-size: 0.44rem;
.wrapper {
  width: 100vw;
  height: 100vh;
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: url("~@/assets/images/index_bg.png") no-repeat 0 0 / 100% 100%;
  background-size: cover;
  display: flex;
  color: #ffffff;
  .item {
    flex-direction: column;
    display: flex;
    margin: 0.2rem 0;
    .item-span {
      .title {
        color: #0e94ea;
      }
      .num {
        color: #ffffff;
        font-size: $num-text-size;
      }
    }
  }
  .span1 {
    width: 25vw;
    .item-span1 {
      height: 20vh;
    }
    .item-span2 {
      flex: 1;
    }
    .item-span3 {
      height: 30vh;
    }
  }
  .span2 {
    flex: 1;
  }
  .span3 {
    width: 25vw;
    .item-span {
      flex: 1;
    }
  }
}
.flex-center-align {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  .title {
    color: #7fff00;
    font-weight: bold;
    margin-left: 0.4rem;
  }
}
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.44rem;
  color: #cdddf7;
  font-weight: 900;
  letter-spacing: 5px;
}
.animate-rate {
  width: 6rem;
  height: 6rem;
  position: fixed;
  margin: 0 auto;
  top: 25vh;
  left: 35%;
}
</style>
